<template>
	<view>
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item label="用户名" name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入用户名" />
			</uni-forms-item>
			<uni-forms-item label="手机号" name="phoneNumber">
				<uni-easyinput type="text" v-model="formData.phoneNumber" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="邮箱" name="email">
				<uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱" />
			</uni-forms-item>
			<uni-forms-item label="密码" name="password">
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submit">注册</button>
	</view>
</template>

<script>
	import {
		reg,
	} from "@/api/client.js";
	export default {
		data() {
			return {
				formData: {
					name: '',
					phoneNumber: '',
					email: '',
					password: ''
				},
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名',
							},
							{
								minLength: 2,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					phoneNumber: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								pattern: /^1[3-9]\d{9}$/, // 国内手机号正则
								errorMessage: '手机号格式不正确',
							}
						]
					},
					email: {
						rules: [{
								required: true,
								errorMessage: '请输入邮箱',
							},
							{
								pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/,
								errorMessage: '邮箱格式不正确',
							}
						]
					},
					password: {
						rules: [{
								format: 'password',
								errorMessage: '密码错误',
							},
							{
								minLength: 6,
								maxLength: 20,
								errorMessage: '密码长度应在 {minLength} 到 {maxLength} 个字符之间',
							},
							{
								pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=]).{6,20}$/,
								errorMessage: '密码至少包含一个大写字母、一个小写字母、一个数字和一个特殊字符',
							}
						]
					}
				}
			};
		},
		methods: {
			async submit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
				let res =await reg(this.formData)
				if (res.state == 200) {
				// 跳转至登录页面
				  uni.navigateTo({
						url:'/pages/login/login',
				  });
				
				  console.log('表单数据信息：', res);
				
				}
			}
		}
	}
</script>

<style>

</style>